import { useState } from 'react';
import { observer } from 'mobx-react-lite';
import { View } from '@tarojs/components';
import Navbar from '@/components/Navbar';
import Taro, { showToast } from '@tarojs/taro';
import TagComp from '@/components/Tag';
import ButtonComp from '@/components/Button';
import AlterComp from '@/components/Alter';
import houseStore from '@/stores/HouseStore';
import { HouseEntity } from '@/entities/HouseEntity';
import authStore from '@/stores/AuthStore';
import systemStore from '@/stores/SystemStore';
import { HouseConstant } from '@/constant/HouseConstant';
import HouseCard from '@/components/HouseCard';
import EmptyComp from '@/components/Empty';
import './index.less';
import useHouse from '@/hooks/useHouse';
import HouseBusiness from '@/business/HouseBusiness';

function Home() {
  const {landlordHouseList, setEditorCurrentHouse} = houseStore;
  const {isLogin} = authStore;
  const {useGetLandlordHouseList, againGetLandlordHouseList} = useHouse();
  // 删除房屋提示框
  const [delHouseAlterVisible, setDelHouseAlterVisible] = useState(false);
  const [chooseHouse, setChooseHouse] = useState<HouseEntity.IResultHouse>();
  // 获取该房东的房屋信息
  useGetLandlordHouseList();

  /**
   * 添加一个房子
   */
  const addHouse = () => {
    Taro.navigateTo({
      url: '/pages/enterHouse/index',
    });
  };

  /**
   * 处理编辑逻辑
   * @param houseInfo 房屋信息
   */
  const toEditor = (houseInfo: HouseEntity.IResultHouse) => {
    Taro.navigateTo({
      url: '/pages/enterHouse/index',
    });
    // 将当前点击编辑的房屋信息存入store里面
    setEditorCurrentHouse(houseInfo);
  };

  /**
   * 关闭删除房屋提示
   */
  const closeDelAlter = () => {
    setDelHouseAlterVisible(false);
  };

  /**
   * 打开删除房屋提示
   */
  const openDelAlter = (house: HouseEntity.IResultHouse) => {
    setChooseHouse(house);
    setDelHouseAlterVisible(true);
  };

  /**
   * 确认删除房屋
   */
  const confirmDelHouse = async () => {
    if (chooseHouse?.status === HouseConstant.HouseToStatusMap.release) {
      closeDelAlter();
      showToast({
        title: '该房屋处于出租状态！',
        icon: 'error'
      });
      return;
    }
    await HouseBusiness.delHouse(chooseHouse?.houseId!);
    againGetLandlordHouseList();
    closeDelAlter();
    showToast({
      title: '删除成功！',
      icon: 'success'
    });
  };

  /**
   * 查看当前房屋详情信息
   * @param houses 当前房屋信息
   */
  const toHouseInfo = (houses: HouseEntity.IResultHouse) => {
    Taro.navigateTo({
      url: '/pages/landlordLookHouse/index',
    });
    // 将当前点击编辑的房屋信息存入store里面
    setEditorCurrentHouse(houses);
  };

  return (
    <Navbar
      mode='home'
      title='全部房屋'
      bgColor='var(--mini-first)'
    >
      <View className='landlord-home-container' style={ {height: systemStore.haveNavbarHaveTabbarHeight} }>
        {
          landlordHouseList?.length && isLogin ?
            landlordHouseList.map((item: HouseEntity.IResultHouse, idx: number) => {
              const {notLeaseNotReleased, notLeaseReleased, release} = HouseConstant.HouseToStatusMap;
              // 已发布未租
              const publish = item.status == notLeaseReleased;
              // 待租
              const forRent = item.status == notLeaseNotReleased || publish;
              // 已租
              const rented = item.status == release;
              return (
                <HouseCard
                  key={ idx }
                  houseName={ item.name }
                  isShowLandlord={ false }
                  houseImg={ JSON.parse(item.houseImg)[0] }
                  isStatusSlot={ true }
                  StatusSlotComponent={
                    <>
                      <TagComp
                        content={ forRent ? '待租' : rented ? '已租' : '删除' }
                        bgColor={ forRent ? 'var(--mini-third)' : rented ? 'var(--mini-first)' : 'var(--mini-fifth)' }
                      />
                      <TagComp
                        content={ rented || publish ? '已发布' : '未发布' }
                        bgColor={ rented || publish ? 'var(--mini-first)' : 'var(--mini-third)' }/>
                    </>
                  }
                  housePrice={ item.price }
                  dateText='创建时间：'
                  date={ item.createdAt }
                  address={ `${ item.provinceName }${ item.cityName }${ item.areaName }${ item.addressName }` }
                  isFooterSlot={ true }
                  FooterSlotComponent={
                    <View className='btn-group'>
                      <ButtonComp title='查看' bgColor='var(--mini-third)' onClick={ () => toHouseInfo(item) }/>
                      <ButtonComp title='编辑' onClick={ () => toEditor(item) }/>
                      <ButtonComp title='删除' bgColor='var(--mini-fifth)' onClick={ () => openDelAlter(item) }/>
                    </View>
                  }
                />
              );
            }) : <EmptyComp text={ isLogin ? '暂无房屋，点击右下角新增一个吧' : '请登陆后查看' }/>
        }
        {
          isLogin ? (
            <View className='add-home' onClick={ addHouse }>
              +
            </View>
          ) : null
        }
      </View>
      <AlterComp
        visible={ delHouseAlterVisible }
        onClose={ closeDelAlter }
        onConfirm={ confirmDelHouse }
        content='你确定要删除该房屋吗？'
      />
    </Navbar>
  );
}

export default observer(Home);
